<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热词</title>
    <script src="../../components/echarts-4.0.4.min.js"></script>
    <style>
        body,html{
            padding: 0;
            margin: 0;
            background:#0A0F23;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
    var turnover = echarts.init(document.getElementById('turnover'));
    var titleData = "近7年创新创业培训情况";

    var dataMap = {};

    dataMap.dataVisit = {
        //次数
        2011: [ 2854, 3022, 4000, 2000, 4900, 6880, 3040],
        //到访人数
        1: [ 1, 3, 4, 2, 4.2, 11, 3.5]
    };

    var barOption = {
        baseOption: {
            timeline: {
                show: false,
                axisType: 'category',
                loop: true,
                autoPlay: true,
                playInterval: 1000,
                label: {
                    normal: {
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    position: 14
                },
                lineStyle: {
                    color: '#fff'
                },
                controlStyle: {
                    show: false
                },
                top: 0,
                data: [
                    '2011','2012','2013','2014','2015',' 2016', '2017'
                ]
            },
            legend: {
                show: false
            },
            grid: {
                left: '5%',
                right: '7%',
                bottom: '10%',
                top:'25%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',fontSize:16
                        }
                    },
                    splitLine: {
                        show: false
                    },
                    data: ['2011', '2012', '2013', '2014','2015','2016','2017']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name:'数量（人/次）',
                    nameTextStyle: {
                        color: "#FFF",
                        verticalAlign:'bottom',
                        fontSize:16
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',fontSize:16
                        }
                    },
                    splitLine: {
                        show: false
                    }
                },
                {
                    type: 'value',
                    name:'场次',
                    nameTextStyle: {
                        color: "#FFF",
                        verticalAlign:'bottom',
                        fontSize:16
                    },
                    //interval: 150,
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#fff',fontSize:16
                        }
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {name: '次数', type: 'bar',barWidth:50},
                {name: '人数', type: 'line', smooth: true}
            ]
        },
        options: [
            {
                title: {
                    text: titleData,
                    left: 'center',
                    top:"7%",
                    textStyle: {
                        color: '#fff',
                        fontSize: 22
                    }
                },
                series: [
                    {
                        data: dataMap.dataVisit['2011'],
                        itemStyle: {
                            normal: {
                                color: 'rgba(0,255,255,.5)',
                                fontSize: 22
                            }
                        }
                    },
                    {
                        yAxisIndex: 1,
                        data: dataMap.dataVisit['1'],
                        itemStyle: {
                            normal: {
                                color: '#67c47b',
                                fontSize: 22
                            }
                        }
                    }
                ]
            }
        ]
    };

    turnover.setOption(barOption);
</script>
</html>